<template>
	<view class="uni-global-box">
		<view class="user-body">
			<view class="titleApp">
				<text>选择位置</text>
			</view>
			<view class="item">
				<!-- 地图 -->
				<div class="container">
					<div>
						<div>
							{{form.poiname}}
						</div>
						当前位置：{{form.address}}
					</div>
					<div id="map-wrap">
						<MapContainer v-if="form.location" :location="form.location.coordinates" :newAddress="form.address" @markers="mapMarkers" ></MapContainer>
					</div>
				</div>
				<view class="util">
					<u-button type="primary" class="uni-button" @click="SubmitEvent" >
						保 存
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{
					address:"山东省菏泽市鄄城县尧王路",
					location:{
						type:"Point",
						coordinates:[115.517166,35.564106],
					},
					poiname:"陈王街道中央华府"
				},
			}
		},
		onLoad(val) {
			this.val = val
		},
		methods: {
			mapMarkers(form){
				this.form = form ;
			},
			// 提交
			async SubmitEvent() {
				// 将经纬度 地域名称返回上层
				uni.$emit("address-select",this.form,this.val);
				
				setTimeout(function() {uni.navigateBack(1)}, 100);
			},
			deletePhoto(e){
				let arr = [ e.tempFilePath  ]
			}
		},
		onUnload() {
			uni.$emit("un-load-map");
		}
	}
</script>

<style scoped   >
	.container{
		box-shadow:0 1px 10px 0 #f3f3f3;
		border-radius: 10px;
		padding:20px;
		z-index:1;
		position:relative;
	}
	#map-wrap{
		height:60%;
		z-index:10;
		position:relative;
	}
	.util{
		width: 70%;
	}
	.user-body{
		padding:10px;
	}
</style>